Angular অ্যাপ্লিকেশনে HTTP ক্লায়েন্ট ব্যবহারের মাধ্যমে সার্ভার থেকে ডেটা লোড বা সার্ভারে ডেটা পাঠানো সম্ভব হয়। Angular এর HttpClient একটি আধুনিক এবং শক্তিশালী API যা RESTful API বা অন্য সার্ভিসের সাথে যোগাযোগের জন্য ব্যবহৃত হয়। এই HTTP ক্লায়েন্ট সিস্টেমটি RxJS এর উপর ভিত্তি করে তৈরি, যা অ্যাসিঙ্ক্রোনাস অপারেশনগুলি সহজে পরিচালনা করতে সাহায্য করে।
Angular অ্যাপ্লিকেশনে HTTP ক্লায়েন্ট ব্যবহারের জন্য প্রথমে HttpClientModule ইম্পোর্ট করতে হয়। সাধারণত এটি app.module.ts ফাইলে করা হয়।
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // HTTP ক্লায়েন্ট ইম্পোর্ট
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule], // এখানে HttpClientModule ইম্পোর্ট করা হচ্ছে
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
এখানে, HttpClientModule কে imports অ্যারে তে যুক্ত করা হয়েছে, যাতে পুরো অ্যাপ্লিকেশন জুড়ে HTTP ক্লায়েন্ট ব্যবহৃত হতে পারে।
একটি কম্পোনেন্ট বা সার্ভিসে HTTP ক্লায়েন্ট ব্যবহার করতে, আপনি Angular এর HttpClient সেবা (service) ইনজেক্ট করতে পারেন।
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http'; // HttpClient ইম্পোর্ট
import { Observable } from 'rxjs';
@Component({
selector: 'app-data-fetch',
templateUrl: './data-fetch.component.html',
})
export class DataFetchComponent implements OnInit {
data: any;
constructor(private http: HttpClient) {} // HttpClient ইনজেক্ট করা
ngOnInit() {
this.fetchData();
}
fetchData() {
this.http.get('https://api.example.com/data') // GET রিকোয়েস্ট
.subscribe(response => {
this.data = response;
console.log(this.data);
});
}
}
এখানে, HttpClient ইনজেক্ট করা হয়েছে এবং get() মেথড ব্যবহার করে সার্ভার থেকে ডেটা ফেচ করা হয়েছে। রেসপন্সটি subscribe() মেথডের মাধ্যমে গ্রহণ করা হচ্ছে।
Angular HTTP ক্লায়েন্ট বিভিন্ন HTTP মেথড সমর্থন করে, যেমন:
get(): ডেটা ফেচ করার জন্য ব্যবহৃত হয়।post(): সার্ভারে ডেটা পাঠানোর জন্য ব্যবহৃত হয়।put(): সার্ভারে সম্পূর্ণ ডেটা আপডেট করতে ব্যবহৃত হয়।patch(): সার্ভারে নির্দিষ্ট ডেটা আপডেট করতে ব্যবহৃত হয়।delete(): সার্ভার থেকে ডেটা মুছে ফেলতে ব্যবহৃত হয়।import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-http-example',
templateUrl: './http-example.component.html',
})
export class HttpExampleComponent {
constructor(private http: HttpClient) {}
// GET রিকোয়েস্ট
fetchData() {
this.http.get('https://api.example.com/data')
.subscribe(response => console.log(response));
}
// POST রিকোয়েস্ট
postData() {
const newData = { name: 'John', age: 30 };
this.http.post('https://api.example.com/data', newData)
.subscribe(response => console.log(response));
}
// PUT রিকোয়েস্ট
updateData() {
const updatedData = { name: 'John', age: 35 };
this.http.put('https://api.example.com/data/1', updatedData)
.subscribe(response => console.log(response));
}
// PATCH রিকোয়েস্ট
patchData() {
const updatedData = { age: 36 };
this.http.patch('https://api.example.com/data/1', updatedData)
.subscribe(response => console.log(response));
}
// DELETE রিকোয়েস্ট
deleteData() {
this.http.delete('https://api.example.com/data/1')
.subscribe(response => console.log(response));
}
}
HTTP রিকোয়েস্টের রেসপন্স হ্যান্ডলিং এবং এরর হ্যান্ডলিং করার জন্য RxJS অপারেটর ব্যবহার করা হয়। যেমন, catchError() এবং map() অপারেটর।
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class DataService {
constructor(private http: HttpClient) {}
getData(): Observable<any> {
return this.http.get('https://api.example.com/data')
.pipe(
catchError(this.handleError) // এরর হ্যান্ডলিং
);
}
private handleError(error: any) {
console.error('Error occurred:', error);
return throwError('Something went wrong!');
}
}
এখানে, catchError() ব্যবহার করে HTTP রিকোয়েস্টের এরর হ্যান্ডলিং করা হয়েছে। throwError() ব্যবহার করে নতুন এরর মেসেজ পাঠানো হচ্ছে।
যখন আপনি সার্ভারে HTTP রিকোয়েস্ট পাঠান, তখন কিছু সময় HTTP হেডার (যেমন, Authorization Token, Content-Type) পাঠানো প্রয়োজন হয়। Angular এর HttpHeaders ক্লাস ব্যবহার করে হেডার পাঠানো যায়।
import { HttpHeaders } from '@angular/common/http';
const headers = new HttpHeaders({
'Authorization': 'Bearer your-token-here',
'Content-Type': 'application/json'
});
this.http.get('https://api.example.com/data', { headers })
.subscribe(response => console.log(response));
এখানে, HttpHeaders ব্যবহার করে Authorization হেডার পাঠানো হয়েছে।
Angular এর HttpClient একটি শক্তিশালী এবং সহজ উপায় সার্ভারের সাথে যোগাযোগ করতে। এটি একাধিক HTTP মেথড সমর্থন করে এবং RxJS অপারেটর দ্বারা রিকোয়েস্ট এবং রেসপন্স পরিচালনা করতে সাহায্য করে। এর মাধ্যমে আপনি GET, POST, PUT, PATCH, এবং DELETE রিকোয়েস্ট সহজেই পাঠাতে এবং গ্রহণ করতে পারেন, এবং রেসপন্স এবং এরর হ্যান্ডলিংও করতে পারেন।
HttpClientModule Angular-এর একটি গুরুত্বপূর্ণ মডিউল যা HTTP ক্লায়েন্ট API প্রদান করে, যা সার্ভার থেকে ডেটা প্রাপ্তি এবং পাঠানোর জন্য ব্যবহৃত হয়। এটি Angular HttpClient ক্লাসের মাধ্যমে HTTP অনুরোধ তৈরি, পাঠানো এবং গ্রহণ করা সহজ করে তোলে। HttpClientModule এর মাধ্যমে আপনি GET, POST, PUT, DELETE এবং অন্যান্য HTTP মেথড ব্যবহার করে সার্ভারের সাথে যোগাযোগ করতে পারেন।
HttpClientModule একটি Angular মডিউল যা HttpClient সেবা প্রদান করে। এটি অ্যাপ্লিকেশনকে HTTP রিকোয়েস্ট পাঠানোর এবং রেসপন্স পাওয়ার জন্য প্রয়োজনীয় কার্যকলাপ পরিচালনা করতে সাহায্য করে। Angular অ্যাপ্লিকেশনগুলোর মধ্যে ডেটা আদান-প্রদানের জন্য এটি অত্যন্ত প্রয়োজনীয়।
HttpClient ব্যবহার করে সহজেই GET, POST, PUT, DELETE ইত্যাদি HTTP রিকোয়েস্ট করা যায়।প্রথমে, আপনার অ্যাপ্লিকেশনে HttpClientModule ইনস্টল ও কনফিগার করতে হবে। এটি করতে, app.module.ts ফাইলে HttpClientModule আমদানি করুন।
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // Import HttpClientModule
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule], // Add HttpClientModule to imports
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
এখানে, HttpClientModule মডিউলটি imports অ্যারে-তে যোগ করা হয়েছে, যা Angular অ্যাপ্লিকেশনে HTTP অনুরোধ ব্যবহারের জন্য প্রস্তুত।
HttpClient ব্যবহার করে বিভিন্ন ধরনের HTTP রিকোয়েস্ট করা যায়। এটি RxJS Observables ব্যবহার করে রেসপন্স হ্যান্ডলিং এবং অ্যাসিঙ্ক্রোনাস কার্যক্রম পরিচালনা করে।
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
data: any;
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('https://jsonplaceholder.typicode.com/posts')
.subscribe(response => {
this.data = response;
console.log(this.data);
}, error => {
console.error('Error:', error);
});
}
}
এখানে:
http.get() মেথডটি GET রিকোয়েস্ট পাঠায়। এটি একটি Observable রিটার্ন করে।.subscribe() মেথডটি রেসপন্সটি গ্রহণ করে এবং সফল হলে response ডেটা থেকে প্রাপ্ত তথ্য this.data এ সংরক্ষণ করা হয়।import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private http: HttpClient) { }
onSubmit() {
const postData = { title: 'Angular POST Example', body: 'This is a test post.' };
this.http.post('https://jsonplaceholder.typicode.com/posts', postData)
.subscribe(response => {
console.log('Post response:', response);
}, error => {
console.error('Error:', error);
});
}
}
এখানে:
http.post() মেথডটি POST রিকোয়েস্ট পাঠায় এবং postData ডেটা সার্ভারে পাঠানো হয়।.subscribe() মেথডটি রেসপন্স বা ত্রুটি হ্যান্ডলিং করে।HTTP রিকোয়েস্ট পাঠানোর সময় ইরর আসতে পারে। Angular-এ HTTP রিকোয়েস্টের ত্রুটি হ্যান্ডলিং করতে RxJS operators যেমন catchError ব্যবহার করা হয়।
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('https://jsonplaceholder.typicode.com/invalid-url')
.pipe(
catchError(error => {
console.error('An error occurred:', error);
return throwError(error);
})
)
.subscribe(response => {
console.log(response);
});
}
}
এখানে:
catchError() ব্যবহার করে HTTP রিকোয়েস্টের ত্রুটি ধরতে এবং কাস্টম ত্রুটি মেসেজ দেখাতে সাহায্য করা হয়।HttpClientModule Angular অ্যাপ্লিকেশনে HTTP রিকোয়েস্ট পরিচালনা করার জন্য একটি গুরুত্বপূর্ণ মডিউল। এটি GET, POST, PUT, DELETE ইত্যাদি HTTP মেথড সাপোর্ট করে এবং ডেটা আদান-প্রদানে সহায়তা করে। HttpClient ব্যবহার করে অ্যাসিঙ্ক্রোনাসভাবে HTTP রিকোয়েস্ট করা যায়, এবং ত্রুটি হ্যান্ডলিং, রেসপন্স প্রসেসিং ইত্যাদি খুব সহজে করা যায়।
Angular-এ HTTP রিকোয়েস্ট ব্যবহারের জন্য HttpClientModule ব্যবহার করা হয়, যা আপনাকে বিভিন্ন HTTP মেথড (GET, POST, PUT, DELETE) দ্বারা সার্ভারের সঙ্গে যোগাযোগ করতে সক্ষম করে। HTTP ক্লায়েন্ট ব্যবহার করে আপনি API কল করতে পারেন, ডেটা প্রাপ্তি ও প্রেরণ করতে পারেন এবং সার্ভারের সঙ্গে ইন্টারঅ্যাকশন করতে পারেন।
প্রথমে, HttpClientModule ইম্পোর্ট করতে হবে, যাতে Angular এর HTTP ক্লায়েন্ট সুবিধাগুলি অ্যাপ্লিকেশনে ব্যবহৃত হতে পারে।
app.module.ts ফাইলে HttpClientModule ইম্পোর্ট করুন:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // Import HttpClientModule
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule // Add HttpClientModule here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
এখন আপনি HttpClient ব্যবহার করতে প্রস্তুত।
GET রিকোয়েস্ট ব্যবহার করে আপনি সার্ভার থেকে ডেটা প্রাপ্তি করতে পারেন। Angular এর HttpClient ক্লাসের get() মেথড ব্যবহার করে GET রিকোয়েস্ট করা হয়।
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // Example API URL
constructor(private http: HttpClient) { }
getData(): Observable<any> {
return this.http.get(this.apiUrl); // HTTP GET request
}
}
এখানে, getData() মেথডটি apiUrl থেকে ডেটা নিয়ে আসবে।
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
template: `<ul><li *ngFor="let post of posts">{{ post.title }}</li></ul>`,
})
export class AppComponent implements OnInit {
posts: any[] = [];
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.getData().subscribe(data => {
this.posts = data;
});
}
}
এখানে, কম্পোনেন্টে getData() মেথড কল করা হয়েছে এবং ডেটা আসলে posts অ্যারে তে ধারণ করা হয়েছে, যা টেমপ্লেটে লুপের মাধ্যমে দেখানো হবে।
POST রিকোয়েস্ট ব্যবহার করে আপনি সার্ভারে নতুন ডেটা পাঠাতে পারেন। Angular এর HttpClient ক্লাসের post() মেথড দিয়ে POST রিকোয়েস্ট করা হয়।
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // Example API URL
constructor(private http: HttpClient) { }
createData(postData: any): Observable<any> {
return this.http.post(this.apiUrl, postData); // HTTP POST request
}
}
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
template: `<button (click)="createPost()">Create Post</button>`,
})
export class AppComponent {
constructor(private dataService: DataService) {}
createPost() {
const newPost = {
title: 'New Post',
body: 'This is the body of the new post',
userId: 1
};
this.dataService.createData(newPost).subscribe(response => {
console.log('Post Created:', response);
});
}
}
এখানে, createData() মেথড ব্যবহার করে নতুন একটি পোস্ট সার্ভারে পাঠানো হয়।
PUT রিকোয়েস্ট ব্যবহার করে আপনি একটি রেকর্ড আপডেট করতে পারেন। Angular-এ put() মেথড ব্যবহার করা হয়।
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // Example API URL
constructor(private http: HttpClient) { }
updateData(id: number, postData: any): Observable<any> {
return this.http.put(`${this.apiUrl}/${id}`, postData); // HTTP PUT request
}
}
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
template: `<button (click)="updatePost()">Update Post</button>`,
})
export class AppComponent {
constructor(private dataService: DataService) {}
updatePost() {
const updatedPost = {
title: 'Updated Post',
body: 'This is the updated body of the post',
userId: 1
};
this.dataService.updateData(1, updatedPost).subscribe(response => {
console.log('Post Updated:', response);
});
}
}
এখানে, updateData() মেথডটি একটি নির্দিষ্ট পোস্টের আইডি ব্যবহার করে সার্ভারে ডেটা আপডেট করে।
DELETE রিকোয়েস্ট ব্যবহার করে আপনি সার্ভার থেকে ডেটা মুছে ফেলতে পারেন। Angular-এ delete() মেথড দিয়ে DELETE রিকোয়েস্ট করা হয়।
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // Example API URL
constructor(private http: HttpClient) { }
deleteData(id: number): Observable<any> {
return this.http.delete(`${this.apiUrl}/${id}`); // HTTP DELETE request
}
}
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
template: `<button (click)="deletePost()">Delete Post</button>`,
})
export class AppComponent {
constructor(private dataService: DataService) {}
deletePost() {
this.dataService.deleteData(1).subscribe(response => {
console.log('Post Deleted:', response);
});
}
}
এখানে, deleteData() মেথডটি একটি পোস্ট আইডি ব্যবহার করে সার্ভার থেকে ডেটা মুছে ফেলবে।
Angular এর HttpClientModule ব্যবহারের মাধ্যমে আপনি সহজে এই HTTP রিকোয়েস্টগুলিকে পরিচালনা করতে পারবেন এবং সার্ভারের সাথে যোগাযোগ করতে পারবেন।
Angular অ্যাপ্লিকেশনগুলিতে HTTP রিকোয়েস্ট করার সময় ত্রুটি বা error handling অত্যন্ত গুরুত্বপূর্ণ। যখন কোনো HTTP রিকোয়েস্ট ব্যর্থ হয়, তখন সঠিকভাবে ত্রুটি সনাক্ত করা, ব্যবহারকারীকে উপযুক্ত বার্তা দেখানো, এবং সমস্যা সমাধানের জন্য লজিক পরিচালনা করা প্রয়োজন। Angular এ HttpClient ব্যবহার করে HTTP রিকোয়েস্ট করা হয় এবং এর মাধ্যমে বিভিন্ন HTTP ত্রুটি সঠিকভাবে হ্যান্ডেল করা সম্ভব হয়।
প্রথমে, HttpClient মডিউলটি আপনার অ্যাপ্লিকেশনে ইম্পোর্ট করতে হবে। এরপর HTTP রিকোয়েস্ট করার জন্য Angular এর HttpClient সার্ভিস ব্যবহার করা হয়।
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule, // HttpClientModule কে অ্যাপ্লিকেশনে ইম্পোর্ট করুন
]
})
export class AppModule { }
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable({
providedIn: 'root',
})
export class DataService {
private apiUrl = 'https://api.example.com/data';
constructor(private http: HttpClient) {}
getData(): Observable<any> {
return this.http.get(this.apiUrl).pipe(
catchError(this.handleError) // Error handling function
);
}
private handleError(error: any): Observable<never> {
console.error('HTTP error occurred:', error); // Log the error
throw error; // Propagate the error
}
}
এখানে, getData() মেথডে catchError অপারেটর ব্যবহার করা হয়েছে, যা কোনো HTTP ত্রুটি হলে handleError মেথডকে কল করবে।
যখন একটি HTTP রিকোয়েস্ট ব্যর্থ হয়, তখন ত্রুটি হ্যান্ডলিং সঠিকভাবে পরিচালনা করা প্রয়োজন। Angular এর catchError অপারেটর ব্যবহার করে HTTP ত্রুটি ধরা যায়। এখানে কিছু সাধারণ HTTP ত্রুটি এবং তাদের হ্যান্ডলিং পদ্ধতি উল্লেখ করা হলো:
HTTP ত্রুটির অবজেক্টের মধ্যে সাধারণত কিছু প্রপার্টি থাকে, যেমন:
status: HTTP স্ট্যাটাস কোড (যেমন 404, 500, ইত্যাদি)statusText: ত্রুটির বর্ণনা (যেমন 'Not Found', 'Internal Server Error', ইত্যাদি)message: ত্রুটির বিস্তারিত বর্ণনাimport { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
private handleError(error: any): Observable<never> {
let errorMessage = '';
if (error.error instanceof ErrorEvent) {
// Client-side or network error
errorMessage = `An error occurred: ${error.error.message}`;
} else {
// Server-side error
errorMessage = `Backend returned code ${error.status}, ` +
`body was: ${error.error}`;
}
console.error(errorMessage); // Log the error message
alert(errorMessage); // Optionally, display the error message to the user
return throwError(errorMessage); // Rethrow the error to the subscriber
}
এখানে:
ErrorEvent যদি ক্লায়েন্ট সাইড বা নেটওয়ার্ক ত্রুটি হয়, তবে ত্রুটির বার্তা বের করা হয়।status যদি সার্ভার সাইড ত্রুটি হয়, তবে সার্ভার থেকে ফিরে আসা স্ট্যাটাস কোড এবং ত্রুটির বার্তা দেখানো হয়।throwError এর মাধ্যমে ত্রুটির বার্তাটি রিটার্ন করা হয়, যাতে সাবস্ক্রাইবাররা এই ত্রুটি ম্যানেজ করতে পারে।Angular-এ HTTP Interceptors ব্যবহার করে সমস্ত HTTP রিকোয়েস্ট এবং রেসপন্সের আগে বা পরে কিছু কাজ করা যায়, যেমন ত্রুটি হ্যান্ডলিং, রিকোয়েস্ট হেডার মডিফাই করা ইত্যাদি।
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req).pipe(
catchError((error) => {
let errorMessage = 'An unknown error occurred!';
if (error.status === 404) {
errorMessage = 'Requested resource not found!';
} else if (error.status === 500) {
errorMessage = 'Server error occurred!';
}
console.error(errorMessage);
alert(errorMessage);
return throwError(errorMessage);
})
);
}
}
এই ইন্টারসেপ্টরটি সমস্ত HTTP রিকোয়েস্টের রেসপন্সে ত্রুটি ধরবে এবং সেই অনুযায়ী ত্রুটি বার্তা প্রদর্শন করবে।
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
@NgModule({
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
]
})
export class AppModule { }
এটি Angular অ্যাপ্লিকেশনে ইন্টারসেপ্টরকে রেজিস্টার করবে, যাতে এটি HTTP রিকোয়েস্ট ও রেসপন্সের আগে বা পরে কাজ করতে পারে।
Angular অ্যাপ্লিকেশনগুলিতে ত্রুটি হ্যান্ডলিংয়ের সময় গুরুত্বপূর্ণ যে ব্যবহারকারীকে উপযুক্তভাবে ত্রুটি বার্তা দেখানো হয়। আপনি alert, toasts, বা UI ইন্ডিকেটর ব্যবহার করে ত্রুটি বার্তা দেখাতে পারেন।
this.dataService.getData().subscribe({
next: (data) => {
this.data = data;
},
error: (err) => {
this.errorMessage = 'An error occurred while fetching data.';
console.error(err);
}
});
এখানে, যদি ত্রুটি হয়, তবে errorMessage প্রপার্টি সেট করা হবে এবং ব্যবহারকারীকে উপযুক্ত বার্তা দেখানো হবে।
Angular-এ HTTP রিকোয়েস্টের ত্রুটি হ্যান্ডলিং অত্যন্ত গুরুত্বপূর্ণ। catchError অপারেটর এবং HTTP Interceptors ব্যবহার করে আমরা HTTP ত্রুটি সঠিকভাবে ধরতে পারি এবং ব্যবহারকারীকে উপযুক্ত বার্তা প্রদান করতে পারি। ত্রুটি হ্যান্ডলিংয়ের মাধ্যমে অ্যাপ্লিকেশনটি আরও নির্ভরযোগ্য এবং ব্যবহারকারী-বান্ধব হয়ে ওঠে।
Interceptors হলো Angular HTTP ক্লায়েন্টের অংশ, যা HTTP রিকোয়েস্ট এবং রেসপন্স প্রক্রিয়াকে কাস্টমাইজ করতে ব্যবহৃত হয়। এটি মূলত HTTP রিকোয়েস্ট বা রেসপন্সের উপর বিভিন্ন ধরনের লজিক প্রয়োগ করতে সাহায্য করে, যেমন টোকেন ব্যবস্থাপনা, লগিং, রিকোয়েস্ট বা রেসপন্স মডিফিকেশন ইত্যাদি।
Interceptors হ'ল Angular-এর HttpClientModule এর একটি বিশেষ ফিচার যা HTTP রিকোয়েস্ট প্রেরণের আগে বা HTTP রেসপন্স আসার পরে কোনো নির্দিষ্ট লজিক বা অপারেশন সম্পাদন করতে সক্ষম।
Interceptor হলো একটি ক্লাস যা HTTP রিকোয়েস্ট বা রেসপন্সের সাথে মধ্যবর্তী পদক্ষেপ হিসেবে কাজ করে। এটি HttpInterceptor ইন্টারফেস বাস্তবায়ন করে এবং intercept মেথডের মাধ্যমে রিকোয়েস্ট এবং রেসপন্সে কাস্টমাইজেশন এবং ম্যানিপুলেশন করে। ইন্টারসেপ্টর ব্যবহারের মাধ্যমে আপনি যেমন অ্যাপ্লিকেশন লেভেলে একসাথে সমস্ত HTTP রিকোয়েস্টের জন্য টোকেন ইনজেক্ট করতে পারেন, তেমনি কোনো নির্দিষ্ট রিকোয়েস্টের রেসপন্স হ্যান্ডেল করার লজিকও প্রয়োগ করতে পারেন।
Angular-এ ইন্টারসেপ্টর তৈরি করতে হলে HttpInterceptor ইন্টারফেসটি ইমপ্লিমেন্ট করতে হয় এবং তারপরে intercept() মেথডটি ব্যবহার করা হয়, যেখানে HTTP রিকোয়েস্টের উপর কাস্টম লজিক প্রয়োগ করা হয়।
ধরা যাক, আমাদের একটি ইন্টারসেপ্টর তৈরি করতে হবে যা HTTP রিকোয়েস্টের সাথে Authorization টোকেন যোগ করবে।
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const authToken = localStorage.getItem('auth_token');
// Authorization হেডার যোগ করা
const clonedRequest = req.clone({
setHeaders: {
Authorization: `Bearer ${authToken}`
}
});
return next.handle(clonedRequest);
}
}
এখানে:
intercept() মেথডটি HttpRequest এবং HttpHandler গ্রহণ করে।req.clone() মেথডটি ব্যবহার করে রিকোয়েস্টটিকে কপি করা হয় এবং Authorization হেডার যুক্ত করা হয়।next.handle(clonedRequest) ব্যবহার করে কপি করা রিকোয়েস্টটি পরবর্তী স্টেপে প্রেরণ করা হয়।ইন্টারসেপ্টরটি ব্যবহারের জন্য Angular মডিউলে এটি প্রোভাইড করতে হবে। সাধারণত AppModule এ এটি প্রদান করা হয়।
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }
এখানে, HTTP_INTERCEPTORS প্রদান করে ইন্টারসেপ্টরটি অ্যাপ্লিকেশন লেভেলে কার্যকর করা হচ্ছে। multi: true প্যারামিটারটি ব্যবহৃত হয়েছে কারণ একাধিক ইন্টারসেপ্টর প্রয়োগ করা সম্ভব।
Angular-এ বিভিন্ন ধরনের ইন্টারসেপ্টর তৈরি করা যেতে পারে। নিচে কয়েকটি উদাহরণ:
এই ইন্টারসেপ্টর HTTP রিকোয়েস্ট এবং রেসপন্স লগ করতে ব্যবহৃত হয়।
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
console.log('HTTP Request:', req);
return next.handle(req).pipe(
tap((event) => {
console.log('HTTP Response:', event);
})
);
}
}
এই ইন্টারসেপ্টরটি HTTP রেসপন্সে কোনো ত্রুটি আসলে তা হ্যান্ডল করার জন্য ব্যবহৃত হয়।
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse, HttpEvent } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req).pipe(
catchError((error: HttpErrorResponse) => {
console.error('HTTP Error:', error);
return throwError(error);
})
);
}
}
Interceptors অত্যন্ত শক্তিশালী এবং কাস্টম HTTP রিকোয়েস্ট এবং রেসপন্স ম্যানিপুলেশন করতে Angular অ্যাপ্লিকেশনে ব্যাপকভাবে ব্যবহৃত হয়।
Angular-এ Observables এবং RxJS (Reactive Extensions for JavaScript) ব্যবহৃত হয় অ্যাসিঙ্ক্রোনাস ডেটা হ্যান্ডলিং এবং ইভেন্ট ড্রিভেন প্রোগ্রামিংয়ের জন্য। Angular অ্যাপ্লিকেশনে বিভিন্ন ধরনের অ্যাসিঙ্ক্রোনাস কাজ যেমন HTTP রিকোয়েস্ট, ইউজার ইন্টারঅ্যাকশন, ইভেন্ট এবং টাইমার ম্যানেজমেন্টে Observables ব্যবহার করা হয়।
Observables হলো একটি অপ্রচলিত প্যাটার্ন যা ডেটার স্ট্রিম ম্যানেজ করতে সাহায্য করে। এটি Publisher-Subscriber প্যাটার্ন অনুসরণ করে, যেখানে এক বা একাধিক Observer ডেটা সংগ্রহ করতে পারে একটি Observable থেকে। এটি অ্যাসিঙ্ক্রোনাস ডেটা স্ট্রিমের উপরে কাজ করে এবং অনেক ইভেন্টের মধ্যে ডেটা হ্যান্ডলিং করতে সহায়তা করে।
RxJS হলো একটি লাইব্রেরি যা JavaScript এ Reactive Programming কনসেপ্ট বাস্তবায়ন করে। এটি Observables এবং তাদের সঙ্গে কাজ করার জন্য অনেক অপারেটর প্রদান করে। RxJS এর সাহায্যে আপনি অনেক ধরনের অ্যাসিঙ্ক্রোনাস কাজ যেমন HTTP রিকোয়েস্ট, ইভেন্ট ম্যানেজমেন্ট, টাইমার, এবং ইউজার ইন্টারঅ্যাকশন সহজে ম্যানেজ করতে পারেন।
RxJS-এর কিছু গুরুত্বপূর্ণ অপারেটর:
Angular অ্যাপ্লিকেশনগুলোতে HttpClient সার্ভিস, Forms, Routing এবং Event handling ইত্যাদির জন্য Observables ব্যবহার করা হয়। উদাহরণস্বরূপ, HTTP রিকোয়েস্টের জন্য Observables ব্যবহৃত হয়।
Angular-এ HttpClient সার্ভিসের মাধ্যমে HTTP রিকোয়েস্ট করতে Observables ব্যবহার করা হয়। উদাহরণস্বরূপ:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class UserService {
private apiUrl = 'https://jsonplaceholder.typicode.com/users';
constructor(private http: HttpClient) { }
getUsers(): Observable<any> {
return this.http.get<any>(this.apiUrl);
}
}
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
users: any[] = [];
constructor(private userService: UserService) { }
ngOnInit(): void {
this.userService.getUsers().subscribe(
(data) => {
this.users = data;
},
(error) => {
console.error('Error fetching users:', error);
}
);
}
}
এখানে, getUsers() মেথডটি একটি Observable ফেরত দেয়, যা HTTP GET রিকোয়েস্টের মাধ্যমে ডেটা পাবে। কম্পোনেন্টে, .subscribe() মেথড ব্যবহার করে আমরা ঐ Observable থেকে ডেটা গ্রহণ করি এবং UI তে সেটি ডিসপ্লে করি।
RxJS আপনাকে অনেক শক্তিশালী অপারেটর দেয়, যেগুলি আপনাকে Observable-এর উপর বিভিন্ন প্রকার অপারেশন (যেমন ট্রান্সফর্মেশন, ফিল্টারিং, কম্বাইনিং ইত্যাদি) করতে সাহায্য করে। নিচে কিছু জনপ্রিয় RxJS অপারেটর দেখানো হল:
map অপারেটরটি Observable থেকে প্রাপ্ত ডেটাকে ট্রান্সফর্ম করার জন্য ব্যবহৃত হয়।
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
const numbers = new Observable((observer) => {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
});
numbers.pipe(
map(value => value * 2) // প্রতিটি সংখ্যাকে 2 দিয়ে গুণ করা
).subscribe(value => console.log(value));
// আউটপুট: 2, 4, 6
filter অপারেটরটি একটি নির্দিষ্ট শর্তের ভিত্তিতে ডেটা ফিল্টার করতে ব্যবহৃত হয়।
import { Observable } from 'rxjs';
import { filter } from 'rxjs/operators';
const numbers = new Observable((observer) => {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
});
numbers.pipe(
filter(value => value % 2 === 0) // শুধুমাত্র ইভেন সংখ্যা ফিল্টার করা
).subscribe(value => console.log(value));
// আউটপুট: 2
debounceTime অপারেটরটি টাইপিং বা ইউজার ইনপুটে বিলম্ব (delay) যোগ করতে ব্যবহৃত হয়। এটি সাধারণত search input বা auto-complete ফিচারের জন্য ব্যবহৃত হয়।
import { fromEvent } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';
const searchBox = document.getElementById('searchBox') as HTMLInputElement;
fromEvent(searchBox, 'keyup').pipe(
map((event: any) => event.target.value),
debounceTime(300) // 300 মিলিসেকেন্ড বিলম্ব
).subscribe(value => {
console.log(value); // ইউজারের ইনপুট 300 মিলিসেকেন্ড পর পর প্রিন্ট হবে
});
Angular অ্যাপ্লিকেশনগুলোতে RxJS এবং Observables একটি অত্যন্ত শক্তিশালী টুল যা অ্যাসিঙ্ক্রোনাস ডেটা এবং ইভেন্ট ড্রিভেন প্রোগ্রামিংকে সহজ করে তোলে। HTTP রিকোয়েস্ট, ইউজার ইন্টারঅ্যাকশন, ফর্ম ভ্যালিডেশন, টাইমার ইত্যাদি পরিচালনার জন্য RxJS-এর অপারেটরগুলো ব্যবহার করা হয়, যা অ্যাপ্লিকেশনগুলোকে আরও ইন্টারেক্টিভ এবং কার্যকরী করে তোলে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
